<template>
  <div class="page-miH page-bgBack">
    <div style="padding: 24px">
      <a-tabs v-model="changeKey" @change="changeSort" :defaultValue="changeKey">
        <a-tab-pane :key="1" tab="审批中" />
        <a-tab-pane :key="2" tab="已通过" />
        <a-tab-pane :key="3" tab="已驳回" />
        <a-tab-pane :key="4" tab="抄送我" />
      </a-tabs>
      <a-row style="margin-top: 10px">
        <a-col :span="12">
          <a-input-search
            placeholder="输入批次名/申请人/用工单位"
            v-model="selectName"
            style="width: 240px"
            @search="onSearch"
            :defaultValue="selectName"
          />
          <a-range-picker v-model="dataVal" style="width: 240px; margin-left: 12px" @change="onChange" :defaultValue="dataVal" />
        </a-col>
        <a-col :span="12" style="text-align: right">
          <a-button type="primary" @click="goExaminationApproval">审批设置</a-button>
        </a-col>
      </a-row>
      <a-table
        class="mt24"
        @change="handleTableChange"
        :pagination="pagination"
        :columns="columns"
        :data-source="dataApproved"
        :loading="loading"
      >
        <span slot="gmtCreate" slot-scope="text">{{ text ? moment(text).format("YYYY-MM-DD HH:mm:ss") : "--" }}</span>
        <span slot="name" slot-scope="text, record">
          <a v-if="record.subjectStatus !== 1" @click="enterDetail(record)">详情</a>
        </span>

        <span slot="subjectStatus" slot-scope="text">
          <span>
            <span class="round" :style="{ background: subjectStatusArr[text - 1].color }"></span>
            {{ text ? subjectStatusArr[text - 1].name : "--" }}
          </span>
        </span>
      </a-table>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import qs from "qs";
import FormJson from "./FormJson";
// import XqCurdMixin from "xqjr-plugin-form/mixins/XqCurdMixin";
import {
  allGroupAndFlowByCompanySite,
  getAllByCompany,
  pageApproving,
  pageApprovedPass,
  pageApprovedReject,
  pageApproveNotifierMe
} from "./api";

export default {
  data() {
    return {
      dataVal: [],
      loading: false,
      changeKey: 1,
      dataApproved: [],
      columns: [
        {
          title: "批次号",
          dataIndex: "orderTitle",
          key: "orderTitle"
        },
        {
          title: "申请人",
          dataIndex: "createUserName",
          key: "createUserName"
        },
        {
          title: "用工单位",
          dataIndex: "companyName",
          key: "companyName"
        },
        {
          title: "发放人数",
          dataIndex: "totalCount",
          key: "totalCount"
        },
        {
          title: "发放总金额",
          dataIndex: "money",
          key: "money"
        },
        {
          title: "申请时间",
          dataIndex: "gmtCreate",
          key: "gmtCreate",
          scopedSlots: { customRender: "gmtCreate" }
        },
        // {
        //   title: "状态",
        //   dataIndex: "subjectStatus",
        //   key: "subjectStatus",
        //   scopedSlots: { customRender: "subjectStatus" }
        // },
        {
          title: "操作",
          dataIndex: "name",
          key: "name",
          scopedSlots: { customRender: "name" }
        }
      ],
      pagination: {
        pageSize: 10,
        total: 0,
        size: "default",
        current: 1,
        showTotal: (total) => `共 ${total} 条`,
        showQuickJumper: true,
        showSizeChanger: true,
        personalPeriod: null,
        editCompanyName: null,
        ticketRecord: null,
        receivableRecord: null,
        pageSizeOptions: ["10", "20", "50", "100"]
      },
      subjectStatusArr: [
        { name: "待申请", color: "#4686FF" },
        { name: "审批中", color: "#4686FF" },
        { name: "审批驳回", color: "#FF7085" },
        { name: "待发放", color: "#32CCAA" },
        { name: "已发放", color: "#32CCAA" }
      ],
      spinning: false,
      tableData: [],
      total: 0,
      pageNo: 1,
      pageSize: 20,
      selectName: "",
      gmtCreateStart: "",
      gmtCreateEnd: ""
    };
  },
  watch: {
    "$route.query": function (newVal, oldVal) {
      this.changeKey = this.$route.query.changeKey ? Number(this.$route.query.changeKey) : 1;
      this.getApprovalList();
    }
  },
  created() {
    this.changeKey = this.$route.query.changeKey ? Number(this.$route.query.changeKey) : 1;
    if (!this.$route.query.changeKey) {
      console.log(JSON.stringify(this.$getCondition("fxsh_condition")));
      if (JSON.stringify(this.$getCondition("fxsh_condition")) !== "{}") {
        // 不是带参数调转进来就使用缓存数据
        var dparams = JSON.parse(this.$getCondition("fxsh_condition"));
        if (dparams) {
          if (dparams.selectName) {
            this.selectName = dparams.selectName;
          }
          if (dparams.gmtCreateStart && dparams.gmtCreateEnd) {
            this.dataVal = [dparams.gmtCreateStart, dparams.gmtCreateEnd];
          }
          if (dparams.changeKey) {
            this.changeKey = dparams.changeKey;
          }
          if (dparams.pageNo) {
            this.pagination.current = dparams.pageNo;
          }
          if (dparams.pageSize) {
            this.pagination.pageSize = dparams.pageSize;
          }
        }
      }
    }
    this.getApprovalList();
  },

  methods: {
    onChange(date, dateString) {
      console.log(date, dateString);
      this.dataVal = dateString;
      this.pagination.current = 1;
      this.getApprovalList(true);
    },
    // 分页器
    handleTableChange(pagination, filters, sorter) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.getApprovalList(true);
    },
    getApprovalList(updateCache) {
      const data = {
        pageNo: this.pagination.current,
        pageSize: this.pagination.pageSize,
        selectName: this.selectName,
        gmtCreateEnd: this.dataVal.length !== 0 ? this.dataVal[1] : null,
        // companyId: this.$store.state.hr.companyId,
        gmtCreateStart: this.dataVal.length !== 0 ? this.dataVal[0] : null
      };
      let fun = null;
      if (this.changeKey === 1) {
        fun = pageApproving(data);
      } else if (this.changeKey === 2) {
        fun = pageApprovedPass(data);
      } else if (this.changeKey === 3) {
        fun = pageApprovedReject(data);
      } else if (this.changeKey === 4) {
        fun = pageApproveNotifierMe(data);
      }
      this.loading = true;
      fun
        .then((res) => {
          console.log(res);
          this.loading = false;
          this.dataApproved = res.data.entities;
          this.pagination.total = res.data && res.data.entityCount;

          var p = JSON.parse(JSON.stringify(data));
          p.changeKey = this.changeKey; // 仅用来缓存数据
          if (updateCache) {
            this.$setCondition("fxsh_condition", JSON.stringify(p));
          }
        })
        .catch((err) => {
          console.log(err);
          this.loadding = false;
        });
    },
    changeSort(e) {
      this.selectName = "";
      this.dataVal = [];
      this.pagination.current = 1;
      this.getApprovalList();
    },
    enterDetail(record) {
      this.$router.push({ path: "/paySalary/examineDetail", query: { record: JSON.stringify(record) } });
    },
    onSearch() {
      this.pagination.current = 1;
      this.getApprovalList(true);
    },
    goExaminationApproval() {
      getAllByCompany("defaultTransferAccounts")
        .then((res) => {
          console.log("res", res);
          if (res.data && res.data.length !== 0) {
            this.$router.push({ path: `/newApproval?defaultTransferAccounts&id=${res.data[0].id}` });
          } else {
            this.$router.push({ path: "/newApproval?defaultTransferAccounts" });
            // this.$router.push({ path: "/approval/setting?defaultTransferAccounts" });
            //
          }
        })
        .catch((err) => {
          console.log("err", err);
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.round {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  vertical-align: unset;
}
</style>
